<template>
    <el-form :model="data.form" ref="formRef" :rules="data.rules" :label-position="'right'" label-width="auto"
        class="payform">
        <el-form-item label="纳税人识别号：" :label-position="'right'" prop="taxNumber"><!--就是统一社会信用代码-->
            <div style="display: flex;width: 100%;">
                <el-input v-model="data.form.taxNumber"></el-input>
                <el-button @click="searchEnterprise()" type="primary" style="margin-left: 1%;">自动填入</el-button>
            </div>
        </el-form-item>
        <el-form-item label="企业名称： " :label-position="'right'" prop="enterpriseName">
            <el-input v-model="data.form.enterpriseName"></el-input>
        </el-form-item>
        <el-form-item label="纳税人名称： " :label-position="'right'" prop="bossName">
            <el-input v-model="data.form.bossName"></el-input>
        </el-form-item>
        <el-form-item label="手机号码：" :label-position="'right'" prop="phone"><!--用户自己填，验证一下-->
            <el-input v-model="data.form.phone" />
        </el-form-item>
        <el-form-item label="税务机关名称： " :label-position="'right'" prop="taxAuthority"><!--国家税务总局河北省税务局-->
            <el-input v-model="data.form.taxAuthority" />
        </el-form-item>
        <el-form-item label="费款属期：" :label-position="'right'" prop="pensionTerm">
            <el-date-picker v-model="data.form.pensionTerm" type="month" value-format="YYYY-MM"/>
         </el-form-item>

    </el-form>
    <div style="display: flex; justify-content: center; align-items: center; margin-top: 5vh;">
        <el-button @click="pay()" type="primary" style="width: 15%; height: 5vh;">缴纳</el-button>
    </div>

</template>
<script setup>
import router from '@/router';
import request from '@/utils/request';
import { reactive, ref } from 'vue';


const data = reactive({
    form: {},
    enterprise: {
        enterpriseId: '',
        enterpriseAddress: '',
        bossName: '',
        phone: '',
        idNumber: '',
        taxNumber: '',
        enterpriseName: '',
        username: '',
        password: '',
    },
    pension: {
        pensionId: "",
        pensionTerm: "",
        pensionTime: "",
        pensionMoney: "",
        enterpriseId: localStorage.getItem('enterprise') ? localStorage.getItem('enterprise').enterpriseId : "",
        taxAuthority: "",//税务机关名称
        serialNumber: "",//自动生成，就是企业缴纳社保记录的id，规则为TS(唐山市)YL(养老)20250328(日期)0001
    },
    rules: {
        enterpriseName: [
            { required: true, message: '请输入企业名称', trigger: ['change', 'blur'] },
            { max: 20, message: '企业名称长度在20个字符以内', trigger: ['change', 'blur'] }
        ],
        taxNumber: [
            { required: true, message: '请输入统一社会信用代码', trigger: ['change', 'blur'] },
            { pattern: /^[1-9ANY][1-59]1302\d{2}[0-9A-Z]{10}$/, message: '请输入正确的统一社会信用代码', trigger: ['change', 'blur'] }
        ],
        bossName: [
            { required: true, message: '请输入法定代表人姓名', trigger: ['change', 'blur'] },
            { min: 2, max: 10, message: '法定代表人姓名长度在2到10个字符之间', trigger: ['change', 'blur'] }
        ],
        phone: [
            { required: true, message: '请输入法定代表人手机号', trigger: ['change', 'blur'] },
            { pattern: /^1[3-9]\d{9}$/, message: '法定代表人手机号格式不正确', trigger: ['change', 'blur'] }
        ],
        taxAuthority: [
            { required: true, message: '请输入税务机关名称', trigger: ['change', 'blur'] },
            { max: 20, message: '税务机关名称长度在20个字符以内', trigger: ['change', 'blur'] },
            { pattern: /^河北省/, message: '税务机关名称必须以“河北省”开头', trigger: ['change', 'blur'] }
        ],
        pensionTerm: [
            { required: true, message: '请输入费款属期', trigger: ['change', 'blur'] },
            { type: 'date', message: '请选择正确的日期', trigger: ['change', 'blur'] }
        ],
    }
})
const formRef = ref();

const pay = () => {
    formRef.value.validate((valid) => {
        if (!valid) {
            ElMessage.error('请填写完整信息')
            return false
        }
    })
    request.post('/pension/add', data.form).then(res => {
        if (res.code == 200) {
            ElMessage.success('缴纳成功')
                router.push('/home/enterprise/enterpriseendowment')
        } else {
            ElMessage.error(res.message)
        }
    })
}
const searchEnterprise = () => {
    data.enterprise=localStorage.getItem('enterprise')?JSON.parse(localStorage.getItem('enterprise')):null
    if(data.enterprise==null){
        ElMessage.error("请先登录")
        return
    }
    data.form.taxNumber=data.enterprise.taxNumber
    data.form.bossName=data.enterprise.bossName
    data.form.enterpriseName=data.enterprise.enterpriseName
    data.form.enterpriseId=data.enterprise.enterpriseId
    data.form.phone=data.enterprise.phone
    data.form.taxAuthority="河北省税务局"
}
</script>
<style scoped>
.el-form-item {
    max-width: 95%;
}

.payform {
    margin: 0 auto;
    width: 50%;
    padding-top: 5%;
}
</style>